<!DOCTYPE html>
<html lang="en">
<head>
       <!-- 引入 echarts.js -->
       <script src="http://pic.beeboom.net/sourse/echarts.min.js"></script>
       <!-- 引入主题 -->
       <script src="http://pic.beeboom.net/sourse/wonderland.js"></script>
       
       <!-- element-ui css-->
       <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
       <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.7/lib/theme-chalk/index.min.css">-->
       <link rel="stylesheet" href="http://pic.beeboom.net/sourse/element-ui@2.15.7/lib/theme-chalk/index.min.css">

       <!-- vue -->
       <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
       <script src="http://pic.beeboom.net/sourse/vue.min.js"></script>
       
        <!-- element-ui js-->
        <!--<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.7/lib/index.min.js"></script>-->
         <script src="http://pic.beeboom.net/sourse/element-ui@2.15.7_lib_index.min.js"></script>
       <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->

       <!--<script src="http://pic.beeboom.net/sourse/axios_0.26.0_axios.min.js"></script>-->
       <script src="http://pic.beeboom.net/sourse/axios_0.26.0_axios.min.js"></script>
       <!-- <script src="http://unpkg.com/vue/dist/vue.js"></script>
       <script src="http://unpkg.com/element-ui@2.15.7/lib/index.js"></script> -->
       <!--<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>-->
       <script src="http://pic.beeboom.net/sourse/md5.min.js"></script>


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta http-equiv="refresh" content="120"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>登入</title>
</head>
<body>
        <div id="login">
            <el-card class="blur_box box-card" >
                <div slot="header" class="title">
                    <span style="color:white">OFA-800 4G汇聚网关</span>
                </div>
                <div text-align="center">
                                <el-input v-model="username" placeholder="用户名称"></el-input>
                                <el-input v-model="password" placeholder="密码" show-password></el-input>
                </div>
                <div text-align="center">
                    <el-button class="btn" @click="confirm">确认</el-button>
                </div>
            </el-card>
            
            <!-- 添加显示MAC地址的div -->
            <div class="mac-display">
                ID: {{ collectorInfo.hostname==''?collectorInfo.mac:collectorInfo.hostname   || '' }}
            </div>
        </div>
</body>
<script>
    const vm = new Vue({
    el: '#login', 
    data() {
        return {
            username:'',
            password:'',
            url: '',
            collectorInfo: {}
        }
    },
    mounted(){
       //当前host
       let url = window.location.host
       console.log(url)
      //  this.url = url
       //测试环境
      //  url='192.168.0.230:1880'
       this.url = url
       // 获取MAC地址
       this.getCollectorInfo()
    },
    methods:{
        confirm(){
            var hash = md5(this.password)
            console.log(hash)
            let that = this
            let token = ''
            let mark=''
            let url=this.url
            axios.post(`http://${url}/sbcb/login`,{
                username:this.username,
                password:hash
            })
            .then(function(response){
                console.log(response)
                if(response.data.code === 401) {
                    // 添加登录错误提示
                    that.$message.error('账号或密码错误。')
                    token = ''
                    throw('账号或密码错误。')
                }
                if(response.data.data =='fail'){
                    that.$message.error('用户名或密码错误')
                    token = ''   
                    throw('密码错误')
                }
                else{
                    let responseData = response.data.data
                    token = responseData.token
                    // mark = response.data.data.mark
                    console.log(token)
                    var val = token
                    // console.log(token)
                    let a = token.split('.')
                    base64Token = a[1]
                    // 解码
                    let b = decodeURIComponent(escape(window.atob(base64Token)))
                    // console.log(b)
                    // console.log(val)
                    localStorage.setItem("token", val)
                    localStorage.setItem('menu',responseData.menu)
                    // localStorage.setItem("mark", mark)
                }
            })
            .then(function set(key, value){

                var val = localStorage.getItem("token")
                // var obj = JSON.parse(val)
                //console.log(obj)
                // console.log(obj)
            })
            .then(function get(key){
                // window.location.href='http://hzshow.ems.hzne.cloud/hfcb/monitor'
                // 获取当前URL，替换最后一级目录为monitor，如果路径是本地文件路径在newPath后面添加.html
                let currentPath = window.location.href;
                currentPath = currentPath.replace('login', 'monitor');
                // if(currentPath.includes('file://')){
                //     currentPath = currentPath + '.html';
                // }
                //访问新的页面
                console.log(currentPath)  
                window.location.href=currentPath
                // console.log(key)
            })
            .catch(err=>{
              console.log(err)
            })
            
        },
        
        // 添加获取采集器信息的方法
        getCollectorInfo() {
            let url = this.url
            axios.get(`http://${url}/api/getCollectorInfo`)
                .then(response => {
                    if (response.data.code === 200) {
                        console.log(response.data.data)
                        this.collectorInfo = response.data.data || {};
                        localStorage.setItem('collectorInfo', JSON.stringify(this.collectorInfo))
                    } else {
                        console.error('获取MAC地址失败:', response.data.msg);
                        this.collectorInfo = '未知';
                    }
                })
                .catch(error => {
                    console.error('获取MAC地址请求错误:', error);
                    this.collectorInfo = {}
                });
        }
    }
})
</script>
<style>
body{
    background: url(http://pic.beeboom.net/img/BG3.png) no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
}
.title{
    font-size: 20px;
    font-weight: 600;
}
.blur_box{
  z-index: 0;/* 为不影响内容显示必须为最高层 */
  position: relative;
  overflow: hidden;
}
.blur_box:before{
  content: "";/* 必须包括 */
  position: absolute;/* 固定模糊层位置 */
  width:300%;
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;/* 回调模糊层位置 */
  /* background:url(../../img/bg1.jpg) no-repeat center center fixed;与上面的bg中的background设置一样 */
  filter: blur(20px);/* 值越大越模糊 */
  z-index: -2;/* 模糊层在最下面 */
}
.rgba{
  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示，将背景颜色加深 */
  position: absolute;/* 固定半透明色层位置 */
  width:100%;
  height:100%;
  z-index: -1;/* 中间是rgba半透明色层 */
}
.box-card {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width:400px;
    min-width:300px;
    margin: 0;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    border-color: transparent;
    /* background-color: whitesmoke; */
}
.btn{
    background-color: #85abd3;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    text-align: center;
    display:block;
}
.btn:hover{
    background-color: #75c1a8;
    color: white;
}
.el-input{
    background-color: rgba(245, 245, 245, 0);
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    border: 10px;
    /* border-bottom: 2px solid silver; */
    /* 下面的会覆盖上面的步伐 */
    outline: none;
    font-size: 15px;
}
.el-input__inner{
    background-color: #f0f0f0;
}
.el-button{
    text-align: center;
}
.el-card{
    background-color: #ffffff08;
}

/* 添加MAC地址显示样式 */
.mac-display {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 12px;
    opacity: 0.8;
}
</style>